<template>
	<view class="realTimeOrder">
		<custom-header title="2025-06-20账单" />
		<view class="loading_wrap" v-if="listLoading == 'loading'">
			<up-loadmore
				:status="listLoading"
				iconSize="22"
				iconColor="#FF3316"
				loadingIcon='semicircle'
				loadingText=""
				/>
		</view>
		<view class="_wrap" v-else>
			<view class="header_wrap">
				<view class="list">
					<view class="title">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/buyer_icon.png" mode=""></image>
						</view>
						<view class="text">买家</view>
					</view>
					<view class="value">
						4000位
					</view>
				</view>
				<view class="list">
					<view class="title">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/deal_icon.png" mode=""></image>
						</view>
						<view class="text">交易</view>
					</view>
					<view class="value">
						9999扎
					</view>
				</view>
				<view class="list">
					<view class="title">
						<view class="icon">
							<image src="/static/my/lp.png" mode=""></image>
						</view>
						<view class="text">理赔</view>
					</view>
					<view class="value">
						888.88元
					</view>
				</view>
				<view class="list">
					<view class="title">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/total_icon.png" mode=""></image>
						</view>
						<view class="text">合计</view>
					</view>
					<view class="value">
						8888.88元
					</view>
				</view>
			</view>
			<scroll-view
				:scroll-y="true" 
				scroll-with-animation
				:style="{height:'calc(100vh - 145rpx - '+statusBarHeight+'px)'}"
				class="scroll_content_wrap"
				v-if="listData.length">
					<view class="table_wrap">
						<view class="tw_head">
							<view class="th name">商品名称</view>
							<view class="th number">数量</view>
							<view class="th price">单价</view>
							<view class="th total">小计</view>
							<view class="th total">买家代码</view>
						</view>
						<view class="tw_body" v-for="(item,index) in listData" :key="index">
							<view class="td name">
								{{ item.name }}<text>{{ item.grade }}</text>
							</view>
							<view class="td number">{{ item.number }}</view>
							<view class="td price">{{ item.price }}</view>
							<view class="td total">{{ item.total }}</view>
							<view class="td total">247883</view>
						</view>
					</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import { ref,computed,onMounted } from 'vue';
	import { onReady } from '@dcloudio/uni-app';
	import { useStore } from 'vuex';
	const store = useStore();
	import { formatTime } from '@/utils/util.js'
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	});
	
	// 获取列表
	const listLoading = ref('loadmore');
	const listData = ref([]);
	const loadGetDetail = ()=>{
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(()=>{
			listData.value = [
				{
					id:1,
					name:'卡布奇诺10枝',
					grade:'E级',
					number:99,
					price:'12.88',
					total:'60.00'
				},
				{
					id:2,
					name:'卡布奇诺10枝',
					grade:'E级',
					number:99,
					price:'12.88',
					total:'60.00'
				},
				{
					id:3,
					name:'卡布奇诺10枝',
					grade:'E级',
					number:99,
					price:'12.88',
					total:'60.00'
				},
				{
					id:4,
					name:'卡布奇诺10枝',
					grade:'E级',
					number:99,
					price:'12.88',
					total:'60.00'
				}
			]
			listLoading.value = 'loadmore'
		},1000);
	};
	
	
	onMounted(()=>{
		loadGetDetail();
	})
</script>

<style lang="scss">
	.header_wrap{
		padding:20rpx;
		display: flex;
		justify-content: space-between;
		.list{
			height: 102rpx;
			width: 166rpx;
			background: #fff;
			border-radius: 10rpx;
			text-align: center;
			.title{
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 15rpx 0 15rpx;
				.icon{
					width: 28rpx;
					height: 28rpx;
					display: flex;
				}
				.text{
					color: #999;
					font-size: 24rpx;
					padding-left: 10rpx;
				}
				.icon1{
					width:20rpx;
					height:11rpx;
					display: flex;
					margin-left: 10rpx;
				}
			}
			.value{
				font-size: 28rpx;
				color: #666;
			}
		}
	}
	.table_wrap{
		padding-bottom: 20rpx;
		.tw_head,.tw_body{
			display: flex;
			text-align: center;
			font-size: 24rpx;
			padding: 20rpx 0;
			.name{
				flex: 2;
				text{
					color: #F5564D;
				}
			}
			.number,.price,.total{
				flex: 1;
			}
		}
		.tw_head{
			background: #fff;
			color:#333333;
		}
		.tw_body{
			color: #666666;
			&:nth-child(2n+1){
				background: #fff;
			}
		}
	}
</style>
